<template>
  <el-dialog v-model="dialogVisible" :title="title" width="720px" class="base_dialog home_page_dialog">
    <div class="content">
      <ProductTable
        type="add"
        ref="addTableRef"
        :isRadio="true"
        :typeKey="typeKey"
      ></ProductTable>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="saveProduct" type="primary">保存</el-button>
        <el-button @click="close">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineEmits, defineExpose } from "vue";
import $ from "@util/base";
import { $msg } from "@ui/msg";

const emit = defineEmits(["chooseProduct"]);

const dialogVisible = ref(false);

const addTableRef = ref(null);
const typeKey = ref(null);
const title = ref(null)
function show(val) {
  typeKey.value = val
  switch (val) {
    case 'goods':
      title.value = '添加商品'
      break
    case 'travel':
      title.value = '添加旅游'
      break
    case 'hotel':
      title.value = '添加酒店'
      break
    case 'gift':
      title.value = '添加礼包'
      break
  }
  dialogVisible.value = true;
  if (!addTableRef.value) {
    return
  }
  addTableRef.value.clearSelection()
}
function close() {
  dialogVisible.value = false;
}

function saveProduct() {
  let data = addTableRef.value.getSelectData();
  if ($.isEmpty(data)) {
    $msg.error("请勾选需要添加的产品");
  } else {
    emit("chooseProduct", {code: data[0].code, name: data[0].name, type: typeKey.value})
    close();
  }
}

defineExpose({ show });
</script>